<template style="position: relative;">
  <section class="w3l-form-36">
    <div class="form-36-mian section-gap">
      <div class="wrapper">
        <div class="form-inner-cont">
          <h3>立即登录</h3>
          <div action="#" method="post" class="signin-form">
            <div class="form-input">
              <span class="fa fa-envelope-o" aria-hidden="true"></span> <input v-model="userLoginForm.username" type="text" name="text"
                                                                               placeholder="用户名" required />
            </div>
            <div class="form-input">
              <span class="fa fa-key" aria-hidden="true"></span> <input v-model="userLoginForm.password" type="password" name="password" placeholder="密码" required />
            </div>

            <div class="login-remember d-grid">
              <label class="check-remaind">
                <input type="checkbox">
                <span class="checkmark"></span>
                <p class="remember">记住密码</p>
              </label>
              <button @click="doLogin" class="btn theme-button">登录</button>
            </div>
          </div>
          <div class="social-icons">
            <p class="continue"><span>Or</span></p>
            <div class="social-login">
              <a href="#facebook">
                <div class="facebook">
                  <span class="fa fa-facebook" aria-hidden="true"></span>

                </div>
              </a>
              <a href="#google">
                <div class="google">
                  <span class="fa fa-google-plus" aria-hidden="true"></span>
                </div>
              </a>
            </div>
          </div>
          <p class="signup">没有密码? <a href="/userRegister" class="signuplink">去注册</a></p>
        </div>

        <!-- copyright -->
        <div class="copy-right">
          <p>Copyright &copy; 2024.Student 基于Java的宠物美容与护理管理系统.</p>
        </div>
        <!-- //copyright -->
      </div>
    </div>
  </section>
</template>

<script>
import {left} from "core-js/internals/array-reduce";
import axios from "axios";

export default {
  name: "UserLogin",
  methods: {
    left,
    doLogin(){
      axios.post('http://localhost:8088/user/login', this.userLoginForm,{withCredentials : true})
          .then(response => {
            if (response.data.code != 200){
              alert("账号或密码错误")
            }else {
              this.$router.push('/userInfo');
            }
        console.log(response.data);
      })
          .catch(error => {
            // 注册失败处理
            alert("登录失败")
            console.error('注册失败', error);
          });
    }
  },
  data() {
    return {
      userLoginForm: {
        username: 'qet123',
        password: 'Qwc123988',
      },
    };
  },
}

</script>

<style scoped>

</style>